import React from 'react';
// import {FooterType} from '../utils/usetype'

import { useAppDispatch, useAppSelector } from '../store';

import { todoSetTypeAction, todoClearIsDoneAction } from '../store/action/todo';

export default function Footer() {
  const dispatch = useAppDispatch();
  const { type } = useAppSelector((state) => state.todo);
  const { lists } = useAppSelector((state) => state.todo);

  let leftLength = 0;
  let finshedNum = 0;

  lists.forEach((item) => {
    if (!item.isDone) {
      leftLength = leftLength + 1;
    }
  });

  finshedNum = lists.length - leftLength;

  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftLength}</strong> 剩余
      </span>
      <ul className="filters">
        {/* 9.3 使用type做排它判断，给a标签设置selected类名 */}
        <li>
          {/* 9.5 通过onClick调用setType修改type的值 */}
          <a
            onClick={() => dispatch(todoSetTypeAction('all'))}
            className={type === 'all' ? 'selected' : ''}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => dispatch(todoSetTypeAction('active'))}
            className={type === 'active' ? 'selected' : ''}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => dispatch(todoSetTypeAction('completed'))}
            className={type === 'completed' ? 'selected' : ''}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button
        style={finshedNum ? { display: 'block' } : { display: 'none' }}
        className="clear-completed"
        onClick={() => dispatch(todoClearIsDoneAction())}
      >
        清除已完成
      </button>
    </footer>
  );
}
